<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>电商数据分析平台</title>
  <link rel="stylesheet" href="https://cdn.staticfile.net/bootstrap/5.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
  <div class="container-fluid p-0">
    <div class="row g-0">
      <!-- 左侧导航栏 -->
      <div class="col-md-3 sidebar">
        <div class="sidebar-header">电商数据分析平台</div>

        <!-- 销售分析分类 -->
        <div class="category-title">销售分析</div>
        <ul class="nav-list">
          {% for chart in chart_config if chart.category == '销售分析' %}
          <li class="nav-item {% if current_chart.id == chart.id %}active{% endif %}"
              onclick="navigateTo('{{ chart.id }}')">
            {{ chart.title }}
          </li>
          {% endfor %}
        </ul>

        <!-- 品类分析分类 -->
        <div class="category-title">品类分析</div>
        <ul class="nav-list">
          {% for chart in chart_config if chart.category == '品类分析' %}
          <li class="nav-item {% if current_chart.id == chart.id %}active{% endif %}"
              onclick="navigateTo('{{ chart.id }}')">
            {{ chart.title }}
          </li>
          {% endfor %}
        </ul>

        <!-- 支付分析分类 -->
        <div class="category-title">支付分析</div>
        <ul class="nav-list">
          {% for chart in chart_config if chart.category == '支付分析' %}
          <li class="nav-item {% if current_chart.id == chart.id %}active{% endif %}"
              onclick="navigateTo('{{ chart.id }}')">
            {{ chart.title }}
          </li>
          {% endfor %}
        </ul>

        <!-- 用户分析分类 -->
        <div class="category-title">用户分析</div>
        <ul class="nav-list">
          {% for chart in chart_config if chart.category == '用户分析' %}
          <li class="nav-item {% if current_chart.id == chart.id %}active{% endif %}"
              onclick="navigateTo('{{ chart.id }}')">
            {{ chart.title }}
          </li>
          {% endfor %}
        </ul>

        <!-- 模型分析分类 -->
        <div class="category-title">模型分析</div>
        <ul class="nav-list">
          {% for chart in chart_config if chart.category == '模型分析' %}
          <li class="nav-item {% if current_chart.id == chart.id %}active{% endif %}"
              onclick="navigateTo('{{ chart.id }}')">
            {{ chart.title }}
          </li>
          {% endfor %}
        </ul>
      </div>

      <!-- 右侧内容区 -->
      <div class="col-md-9 content-area">
        <!-- 顶部指标卡 -->
        <div class="metrics-bar">
          <div class="metric-card">
            <div class="metric-value">58,192</div>
            <div class="metric-label">总订单量</div>
          </div>
          <div class="metric-card">
            <div class="metric-value">¥984,360</div>
            <div class="metric-label">总销售额</div>
          </div>
          <div class="metric-card">
            <div class="metric-value">3种</div>
            <div class="metric-label">支付方式</div>
          </div>
          <div class="metric-card">
            <div class="metric-value">12,500</div>
            <div class="metric-label">活跃用户</div>
          </div>
        </div>

        <!-- 图表标题 -->
        <h2 class="chart-title">{{ current_chart.title }}</h2>

        <!-- 图表容器 -->
        <div class="chart-container">
          <div id="{{ current_chart.id }}" class="chart-area"></div>
        </div>

        <!-- 图表说明 -->
        <div class="chart-description">
          {{ current_chart.description }}
        </div>
      </div>
    </div>
  </div>

  <script>
  // 数据对象
  const data = {
    tl: {{ trend_labels | tojson }},
    tv: {{ trend_values | tojson }},
    cl: {{ cat_labels | tojson }},
    cv: {{ cat_values | tojson }},
    pl: {{ pay_labels | tojson }},
    pv: {{ pay_values | tojson }},
    pa: {{ pay_amount | tojson }},
    al: {{ age_groups | tojson }},
    fl: {{ female_counts | tojson }},
    ml: {{ male_counts | tojson }},
    cal: {{ cat_amount_labels | tojson }},
    cav: {{ cat_amount_values | tojson }},
    heatmap: {{ heatmap_data | tojson }},
    predictions: {{ predictions | tojson }},
    metrics: {{ metrics | tojson }},
    feature_importance: {{ feature_importance | tojson }},
    segment_predictions: {{ segment_predictions | tojson }}
  };

  // 导航函数
  function navigateTo(chartId) {
    window.location.href = `/chart/${chartId}`;
  }
  </script>
  <script src="{{ url_for('static', filename='js/charts.js') }}"></script>
</body>
</html>